<template>
  <div class="about">
    <div class="header">
      <p>关于</p>
    </div>
    <van-list>
      <van-cell is-link @click="showOne">版权说明</van-cell>
      <van-popup v-model:show="show1" :style="{ padding: '20px' }"
        >本APP中发布的数据为中国环境监测总站所有，未经授权，严禁转载及使用！</van-popup
      >
      <van-cell is-link @click="showTwo">发布说明</van-cell>
      <van-popup v-model:show="show2" :style="{ padding: '20px' }"
        ><p style="font-size: 14px">
          1、发布依据<br />

          根据《环境空气质量标准》（GB 3095-2012）、《环境空气质量标准》（GB
          3095-2012）修改单和《环境空气质量指数（AQI）技术规定（试行）》（HJ633-2012），发布全国空气质量状况；根据国务院《大气污染防治行动计划》和生态环境部《全国环境空气质量预报预警实施方案》（环办函〔2015〕330号），发布各省（自治区、直辖市）、省会城市和计划单列市环境空气质量预报预警信息。<br />
          2、发布机构<br />
          中国环境监测总站<br />
          3、发布指标和内容点位发布指标和内容：发布各点位细颗粒物（PM2.5）、可吸入颗粒物（PM10）、二氧化硫（SO2）、二氧化氮（NO2）、一氧化碳（CO）和臭氧（O3）的小时浓度值和空气质量指数（AQI）。国控点自2018年9月1日起发布的颗粒物浓度值均为实况浓度，气态污染物浓度值均为参比状况浓度。非国控点在2019年1月1日前发布污染物浓度数据仍为标况浓度和参比状况浓度。
          城市发布指标和内容：发布城市日空气质量指数（AQI）、城市小时空气质量指数AQI以及相应的空气质量级别、首要污染物等；未来5天空气质量指数范围、空气质量等级、首要污染物等预报信息，转发当地政府发布的预警信息，并根据能力建设进展发布空气质量形势预报等更多精细化的城市预报内容。
          省（自治区、直辖市）和区域发布内容：包括辖区省域空气质量形势预报信息，转发当地政府发布的预警信息，并根据能力建设进展发布区域空气质量形势图等更多详细预报信息。<br />
          4、 数据来源<br />
          空气质量状况来源于国家和地方空气质量自动监测点位的空气质量自动监测结果。预报数据来源于各个参与发布的城市、省（自治区、直辖市）环境监测成员单位、区域预报中心和相关生态环境预报部门基于现有污染源监测、环境空气质量新标准实时监测、大气污染过程模拟分析以及相关监测成员单位会商预报的预报结果。<br />
          5、 其他说明<br />
          （1）发布结果主要显示全国空气质量总体状况，由于所采用的监测点位数量与各城市不尽相同，因此与各城市发布的城市空气质量状况亦会有所差异。<br />
          （2）发布结果通常为每小时更新一次，由于数据传输需要一定的时间，发布时间约有半小时延滞。例如15:00的监测数据在15:30左右发布。当遇到监测仪器校零、校标等日常维护行为，或出现通信故障、停电等现象，某些站点会出现一段时间内无数据的情况。<br />
          （3）发布的空气质量预报数据仅用于公众参考，不用于各地空气质量管理和预警启动。<br />
          6、 特别说明<br />
          根据《环境空气质量指数（AQI）技术规定（试行）》（HJ633-2012），实时发布数据由发布系统进行初步审核，所发布小时数据仅为当天参考值，用于向公众提供健康指引，不直接用于空气质量达标状况的评价。评价空气质量达标状况时，应依据《环境空气质量标准》（GB
          3095-2012）中的规定进行。同样，空气质量预报系统所发布的日数据仅为当天参考值，用于向公众提供健康指引，不直接用于空气质量达标状况的评价。<br />
          7、Q&A<br />
          （1）什么是AQI：AQI即空气质量指数。根据《环境空气质量指数（AQI）技术规定》（HJ633-2012），AQI是将《环境空气质量标准》（GB3095-2012）中规定的6项污染物（SO2、NO2、PM2.5、PM10、CO、O3）的浓度依据适当的分级浓度限值计算得到的简单的无量纲指数，可以直观、简明、定量地描述环境空气质量状况。将空气质量指数按照0~50、51~100、101~150、151~200、201~300、>300，划分为一至六个等级，分别用绿、黄、橙、红、紫、褐红色表示。<br />
          （2）什么是首要污染物：在AQI指数大于50时，空气质量分指数最大的污染物为首要污染物。<br />
          （3）什么是空气质量预警：当空气污染物浓度或AQI达到预警级别时，由环境管理部门向公众和相关部门发出警报，以便提醒公众采取适当的防御方法及有关部门采取必要的应对措施，保证人民群众的身体健康。空气质量预警采取分级预警的形式，以空气质量预报为依据，综合考虑污染程度、覆盖范围和持续时间等因素，分别规定符合各地实际情况和现实需求的预警等级和更有针对性的应急方案，以发挥最大的社会和经济效益。<br />
        </p>
        <img
          style="width: 100px; margin: 30px 0 0 90px"
          src="@/assets/about_img/erweima.jpg"
          alt=""
        />
        <p style="margin-left: 40px; font-size: 14px">扫一扫二维码，下载空气质量发布</p>
      </van-popup>
      <van-cell is-link @click="showThree">AQI说明</van-cell>
      <van-popup v-model:show="show3" :style="{ padding: '20px' }">
        <div style="text-align: center; font-size: 18px; margin-bottom: 30px">
          <p>AQI说明</p>
        </div>
        <img style="width: 100%" src="@/assets/about_img/AQI.jpg" alt="" />
      </van-popup>
      <van-cell is-link @click="showFour">空气质量标准</van-cell>
      <van-popup v-model:show="show4" :style="{ padding: '20px' }">
        <img style="width: 100%" src="@/assets/about_img/biaozhun.jpg" alt="" />
      </van-popup>
      <van-cell is-link @click="showFive">空气质量评价方法</van-cell>
      <van-popup v-model:show="show5" :style="{ padding: '20px' }">
        <img style="width: 100%" src="@/assets/about_img/pingjia.jpg" alt="" />
      </van-popup>
      <van-cell is-link @click="showSix">官方微信公众号</van-cell>
      <van-popup v-model:show="show6" :style="{ padding: '20px' }">
        <p>
          中国环境监测总站官方微信订阅号:“Sunshine”<br />
          订阅号发布全国环境监测最新工作动态进展，推介环境监测主流观点言论，展示环境监测最新科技成果，开展环境质量深度分析和权威解读。<br />
          微信搜索“刘蕴”或截屏后在微信中识别二维码。
        </p>
        <img style="width: 50%; margin: 30px 0 0 80px" src="@/assets/about_img/lyewm.png" alt="" />
      </van-popup>
      <van-cell style="margin-bottom: 5px" is-link @click="showSeven">功能介绍</van-cell>
      <van-popup v-model:show="show7" :style="{ padding: '20px' }">
        <img style="width: 100%" src="@/assets/about_img/jieshao.jpg" alt="" />
      </van-popup>
      <van-cell is-link @click="showEight">意见反馈</van-cell>
      <van-popup v-model:show="show8" :style="{ padding: '20px' }">
        <van-cell-group inset>
          <van-field v-model="value" placeholder="请输入您想反馈给我们的意见" />
        </van-cell-group>
        <div style="margin: 10px 0 0 15px">
          <van-button style="width: 245px; height: 30px" type="success">提交</van-button>
        </div>
      </van-popup>
      <van-cell style="margin-bottom: 5px" is-link @click="showNine">设置</van-cell>
      <van-popup v-model:show="show9" :style="{ padding: '20px' }">内容</van-popup>
      <van-cell is-link @click="showTen">关于我们</van-cell>
      <van-popup v-model:show="show10" :style="{ padding: '20px' }">
        <p>
          刘蕴环境监测总站（http://www.cnemc.cn）是武汉华夏理工学院生态环境部直属事业单位，是环境监测的技术中心、网络中心、数据中心、质控中心和培训中心，主要职能是承担学校环境监测任务，引领环境监测技术发展，为学校环境管理与决策提供监测信息、报告及技术支持，对学校环境监测工作进行技术指导。<br />
          刘蕴环境监测总站通过官方网站（http://www.cnemc.cn）和手机应用（安卓、iOS搜索“空气质量发布”），发布学校空气质量实时监测数据及空气质量预报预警信息，向公众提供健康指引。同时，已与墨迹天气等开展合作，共同发布空气质量的相关信息。<br />
          我们希望能与社会各界伙伴加强合作与交流，通过多种方式，不断拓宽信息发布渠道，更好满足公众环境知情权，持续提升环境监测数据的服务范围和公众影响力。<br />
          如有任何关于国家环境质量监测数据产品服务、咨询、意见建议等事宜，请与我们联系。<br />
          联系电话：16671081641<br />
          电子邮箱：2635138719@qq.com<br />地址：武汉市华夏理工学院<br />
          邮编：430000
        </p>
        <img style="width: 50%; margin: 30px 0 0 80px" src="@/assets/about_img/lyewm.png" alt="" />
        <p style="margin-left: 40px; font-size: 14px">扫一扫二维码，来和刘蕴做好朋友吧!</p>
      </van-popup>
    </van-list>
    <div class="footer">
      <img
        src="https://img2.baidu.com/it/u=2250997377,313757253&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500"
        alt=""
      />
      <p style="font-size: 12px">空气质量发布</p>
      <p style="font-size: 12px">Version&emsp;4.4.0</p>
      <div style="font-weight: 600"><van-icon name="award-o" />&nbsp;华夏刘蕴监测总站</div>
      <p style="font-size: 12px; margin-bottom: 5px; color: #8f8f8f">Powered by 小孙</p>
      <div style="font-size: 12px; color: #8f8f8f">
        <span>服务协议</span><span style="margin: 0 10px 0 10px">|</span><span>隐私政策</span>
      </div>
    </div>
    <NavbarView></NavbarView>
  </div>
</template>
<script setup lang="ts">
import NavbarView from '@/components/navbar/IndexView.vue'
import { ref } from 'vue'
const value = ref('')
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const show5 = ref(false)
const show6 = ref(false)
const show7 = ref(false)
const show8 = ref(false)
const show9 = ref(false)
const show10 = ref(false)
const showOne = () => {
  show1.value = true
}
const showTwo = () => {
  show2.value = true
}
const showThree = () => {
  show3.value = true
}
const showFour = () => {
  show4.value = true
}
const showFive = () => {
  show5.value = true
}
const showSix = () => {
  show6.value = true
}
const showSeven = () => {
  show7.value = true
}
const showEight = () => {
  show8.value = true
}
const showNine = () => {
  show9.value = true
}
const showTen = () => {
  show10.value = true
}
</script>

<style lang="scss" scoped>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.header {
  width: 100%;
  height: 40px;
  background: #fff;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
}
.footer {
  margin-top: 15px;
  text-align: center;
  height: 250px;
}
.footer img {
  display: inline-block;
  width: 65px;
  height: 65px;
  border-radius: 5px;
}
.van-cell {
  height: 40px;
}
:deep(.van-cell__value) {
  text-align: left;
  color: #000;
}
:deep(.van-overlay) {
  background: rgba($color: #000, $alpha: 0.1);
}
:deep(.van-popup--center) {
  height: 400px;
}
:deep(.van-cell-group--inset) {
  width: 240px;
  height: 200px;
  border: 1px solid #dddddd;
}
</style>
